<!DOCTYPE html>
<html id="html">
    <head>
        <meta charset="utf-8">
        <title>test mouse event</title>

        <script type="text/javascript">
 
var prop = ['screenX', 'screenY', 'clientX', 'clientY', 'ctrlKey',
     'shiftKey', 'metaKey', 'altKey', 'button'];
function getMouseInfo(event) {
    var o ={}
    prop.forEach(function(name){
        o[name] = event[name];
    })
    return o;
}
 
 
var result = {
    mousedown:-1,
    mouseup:-1,
    mousemove:-1,
    click:-1,
    dblclick:-1
}

function saveEventProperties(e)
{
    var k = result[e.type];
    var inf = getMouseInfo(e);
    if (k == -1)
        result[e.type] = inf;
    else {
        result[e.type] = new Array();
        result[e.type].push(k)
        result[e.type].push(inf)
    }
}

function clearM(){
    result.mousedown = -1;
    result.mouseup = -1;
    result.mousemove = -1;
    result.click=-1;
    result.dblclick=-1;
}

function showEvent(e) {
    var s = e.type + ': '+e.target.id;
    prop.forEach(function(name){
       s += ' - '+name+'='+e[name];
    })
    console.log(s)
}

window.onload = function(event){
    //document.addEventListener("mousedown", showEvent, true);
    //document.addEventListener("mousemove", showEvent, true);
    //document.addEventListener("mouseup", showEvent, true);
    //document.addEventListener("click", showEvent, true);
    //document.addEventListener("dblclick", showEvent, true);
    var t = document.getElementById('btn');
    t.addEventListener("mousedown", saveEventProperties, true);
    t.addEventListener("mousemove", saveEventProperties, true);
    t.addEventListener("mouseup", saveEventProperties, true);
    t.addEventListener("click", saveEventProperties, true);
    t.addEventListener("dblclick", saveEventProperties, true);
}
        </script>
        <style type="text/css">
            #btn {
                width:100px;
                height:100px;
                position: absolute;
                top:20px;
                left:20px;
                border:1px solid red;
            }
        </style>
    </head>
    <body id="body">
        <div id="btn">
            Hello world
        </div>
    </body>
</html>



